<template>
    <div class="container" style="height: 100%">
      <div class="header" style="width: 100%;max-height: 7%;  border-bottom:1px solid rgba(0,0,0,0.1);">
        <div class="return" @click="$router.back()" style="position: absolute;top:.8rem;left:1rem;width: 1.4rem;height: 1.4rem">
          <img src="static/img/return.png"  width="100%" height="100%"/>
        </div>
        <h2 style="margin:.5rem;height:2.1rem;padding-top:.1rem;font-size: 1.4rem;text-align: center">添加行情</h2>
      </div>

      <div style="max-height: 93%;overflow-y: scroll;">

        <div  v-for="market,index in marketList" class="coin flex-derc-nowarp flex-jcsb ">
          <div class="zhizhen flex-derc-nowarp flex-center-center" style="padding-left: .5rem">
            <img :src="'static/img/market/'+market.name+'.png'" alt="" style="width: 2rem;height:2rem">&nbsp;
            <div style="margin:.4rem 0rem 0rem .8rem">
              <span>{{market.name}}/USD</span>
              <span>{{market.fullName}}</span>
            </div>
          </div>
          <div class="switch flex-derc-warp flex-center-center">
            <mt-switch v-model="market.switch" :id="market.id" @change="onSwitch(market,index)"></mt-switch>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

  import {mapGetters,mapActions} from 'vuex'

  //import {marketSwitchList} from '../../service/config'
  import {Switch } from 'mint-ui'

  export default {
    components:{
      Switch
    },
    props:[],
    data () {
      return {

      }

    },
    computed:{
      ...mapGetters(['marketList'])
    },
    methods: {
      ...mapActions(['setMarketByIndex','setRefresh']),
      onSwitch(market,index){
        // market.switch=!market.switch
        this.setMarketByIndex(market,index);

        this.setRefresh(true)
      }
    },
    watch:{

    },
    async mounted() {



    }
  }
</script>
<style scoped>
  #app{
    overflow: scroll;
  }
.container{
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

  .xuanzefenlei{
    background: #ffffff;
    border-bottom:1px rgba(0,0,0,0.1) solid;
  }
  .coin {
    float:left;
    margin:0rem 0rem 0rem 5%;
    height: 4rem;
    width: 90%;
    padding:0rem 0rem .5rem 0rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  .coin div:nth-child(1){
    padding-top: .7rem;
    width: auto;
    height: 100%;
    float: left;
  }

  .coin .zhizhen{
    font-size: 1.4rem;
    color: #4e5e70;
  }

  .coin .zhizhen img{
    width: 2.8rem;
    height: 2.8rem;
    display: inline-block;
    float: left;
    margin-top: .5rem;
  }

.coin .zhizhen div{
  display: block;
  float: left;
  width: auto;
  margin-left: .5rem;
}
  .coin .zhizhen span{
    font-size: .7rem;
    display: block;
    width: 100%;
    margin:0rem 0rem 0rem 0rem
  }


  .coin .zhizhen span:first-child{
    font-size: 1rem;
    font-weight: 700;
  }



  .switch {
    display: inline-block;
    float: right;
    height: 100%;
    text-align: right;
    padding-top: 1.1rem;
  }

/*.mint-switch-core{*/
  /*width:52px;*/
  /*height:32px;*/
/*}*/
</style>

